<template>
  <div class="list-item" @click="onClick(props.itemType, props.itemID)">
    <div class="img-area">
      <img :src="props.imgUrl" />
    </div>
    <div>
      <span class="item-name">{{ props.name }}</span>
      <span class="item-points">{{ props.points }}积分</span>
    </div>
  </div>
</template>

<script>
import { computed, ref, reactive, onMounted } from "vue";
import router from "@/router";

export default {
  name: "ListItem",
  components: {},
  props: {
    name: { type: String, default: "" },
    points: { type: Number, default: 0 },
    itemType: { type: [String, null], default: null },
    itemID: { type: [Number, String, null], default: null },
    imgUrl: { type: String, default: "" },
  },
  setup(props, { emit }) {
    props = reactive(props);
    function onClick(itemType, itemID) {
      router.push({
        path: "/product",
        query: { itemType: itemType, itemID: itemID },
      });
    }
    onMounted(async () => {
      // console.log(props);
    });
    return {
      props,
      onClick,
    };
  },
};
</script>

<style scoped>
.list-item {
  display: inline-block;
  height: 200px;
  min-width: 150px;
  max-width: 270px;

  padding: 5px 5px 5px 5px;
  margin: 5px;
  border-radius: 5px;
  overflow: hidden;
  /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
  /* border:1px solid rgba(0, 0, 0, 0.1); */
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.list-item:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

.list-item:active {
  background-color: rgba(0, 0, 0, 0.05);
}

.list-item .img-area {
  height: 85%;
  margin-bottom: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.list-item .img-area img {
  max-height: 100%;
}

.item-name {
  float: left;
  font-size: 10px;
  /* padding-left: 5px;
  padding-right: 10px; */
}
.item-points {
  float: right;
  font-size: 10px;
  /* padding-left: 10px;
  padding-right: 5px; */
}
</style>